<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/header.jsp"%>

<style type="text/css">
#content {width: 200px; height:100px}
#map-canvas { margin: 20px 0; width: 100%; height: 500px }
</style>

<div class="container">
	<div class="content">
		<article>
			<div>
				찾아오시는길
			</div>
			<div id="map-canvas" ></div>
		</article>
	</div>
</div>

<script type="text/javascript">

	function init() {
		GGMap.initialize();
		GGMap.putMarker();
		addActionListener();
	}
	
	function addActionListener() {
		
	}
	
	var GGMap = function() {
		var map, myLatlng, geocoder;
		
		//지도 초기화
		this.initialize = function() {
			
			myLatlng = new google.maps.LatLng(37.43199, -232.83214);
			var mapOptions = {
				zoom : 4,
				center : myLatlng,
				//mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			
			map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);
			geocoder = new google.maps.Geocoder();
		};
		
		this.putMarker = function() {
			
			var address = '경상남도 양산시 덕계동 667-48', marker;
			
			geocoder.geocode( { 'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					
					map.setCenter(results[0].geometry.location);
					map.setZoom(15);
					
					marker = new google.maps.Marker({
			      		position: results[0].geometry.location,
					    map: map,
			      		title: '대광천막기업 \n양산시 덕계동 667-48'
					});
					
					var contentString = '<div id="content">대광천막기업<br>경상남도 양산시 덕계동 667-48</div>',
						infowindow = new google.maps.InfoWindow({
					    	content: contentString
						});
					
					google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
						return function() {
							GGMap.toggleBounce(marker);
							infowindow.open(map, marker);
						};
					})(marker, infowindow)
					);
					
					google.maps.event.trigger(marker, 'click');
					
				} else {
					alert('Geocode was not successful for the following reason: ' + status);
				}
			});
		};
		
		this.toggleBounce = function(marker) {
			 if (marker.getAnimation() != null) {
				    marker.setAnimation(null);
			 }else {
				    marker.setAnimation(google.maps.Animation.BOUNCE);
			 };
		};
	};
	
	var GGMap = new GGMap();
	</script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCrQa1PqG-1-AvdBip5FkDpgWx51JdAMyM&sensor=false">
</script>

<%@ include file="/common/footer.jsp"%>